<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="logo">
          <img src="@/assets/004.jpg" alt="logo" />
        </div>
        <div
          class="toggle-button"
          v-show="isCollapse == false"
          @click="toggleCollapse"
        >
          <span class="iconfont icon-shouqi"></span>
        </div>
        <div
          class="toggle-button"
          v-show="isCollapse == true"
          @click="toggleCollapse"
        >
          <span class="iconfont icon-kuozhan"></span>
        </div>
        <!-- 侧边栏菜单区域 -->
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          :default-active="activePath"
        >
          <!-- 一级菜单 -->
          <!-- 数值和字符串拼接得到字符串 -->
          <el-submenu
            :index="item.id + ''"
            v-for="item in menulist"
            :key="item.navName"
          >
            <!-- 一级菜单模板区 -->
            <template slot="title">
              <!-- 图标 -->
              <i :class="iconsObj[item.id]"></i>
              <!-- 文本 -->
              <span>{{ item.navName }}</span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item
              :index="'/' + subItem.path + ''"
              v-for="subItem in item.children"
              :key="subItem.id"
              @click="saveNavState('/' + subItem.path)"
            >
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>{{ subItem.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header">
            <div class="header-right">
              <span class="iconfont icon-yonghu"></span>
              <el-dropdown @command="outToLogin">
                <div class="header-right-user-name">{{ username }}</div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">修改密码</el-dropdown-item>
                  <el-dropdown-item command="b">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- 修改管理员的对话框 -->
    <el-dialog
      title="修改管理员密码"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px"
      >
        <el-form-item label="管理员">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldpassword">
          <el-input v-model="editForm.oldpassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpassword">
          <el-input v-model="editForm.newpassword"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editManagerInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { menulist, iconsObj } from "@/config/config.js";
import { isSuperManager } from "@/function/isSuperManager/isSuperManager.js";
export default {
  data() {
    return {
      id: 0,
      username: "",
      isCollapse: false,
      activePath: "",
      iconsObj: {},
      menulist: [],
      managerList: [],
      // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      // 查询到的用户信息对象
      editForm: {
        id: 0,
        oldpassword: "",
        newpassword: "",
      },
      // 修改表单的验证规则对象
      editFormRules: {
        oldpassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 8,
            max: 15,
            messasge: "密码长度在8~15个字符之间,且必须使用数字和字母",
            trigger: "blur",
          },
        ],
        newpassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 8,
            max: 15,
            messasge: "密码长度在8~15个字符之间,且必须使用数字和字母",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    let self = this;
    self.menulist = menulist;
    self.iconsObj = iconsObj;
    self.username = sessionStorage.getItem("username");
    // self.oldpassword = sessionStorage.getItem("password");
    self.editForm.id = sessionStorage.getItem("id");
    // console.log(self.editForm);
    self.activePath = window.sessionStorage.getItem("activePath");
    self.getManagerList();
  },
  methods: {
    async getManagerList() {
      let self = this;
      let res = await self.$get("/admin");
      // console.log(res);
      self.managerList = res.result.info;
    },
    handleOpen() {},
    handleClose() {},
    outToLogin(command) {
      let self = this;
      if (command == "b") {
        window.sessionStorage.clear();
        this.$router.push("/Login");
      }
      if (command == "a") {
        self.editDialogVisible = true;
      }
    },
    // 点击按钮, 切换菜单的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    //保存链接的激活状态
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
    // 修改对话框显示
    // showEditDialog() {
    // console.log(id);
    // let self = this;
    // self.editForm =
    //   self.managerList[self.managerList.findIndex((res) => res.id === id)];
    // console.log(self.editForm)
    // self.editDialogVisible = true;
    // console.log(res)
    // },
    // 监听修改对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    // 修改管理员密码
    editManagerInfo() {
      let self = this;
      isSuperManager();
      self.$refs.editFormRef.validate(async (valid) => {
        // console.log(valid)
        if (!valid) return;
        // 发起修改用户信息的数据请求
        const res = await self.$put(
          "/admin/" + self.editForm.id,
          self.editForm
        );

        if (res.code !== 1) {
          return self.$message.error("修改密码失败！");
        }
        // 关闭对话框
        self.editDialogVisible = false;
        // 刷新数据列表
        // self.getManagerList();
        // 提示修改成功
        self.$message.success("修改密码成功！");
      });
    },
  },
};
</script>

<style lang="scss">
.logo {
  img {
    width: 100%;
    height: 100px;
  }
}
.header {
  height: 100%;
  align-items: center;
}
.header-right {
  align-items: center;
  .header-right-user-name {
    margin-right: 50px;
    color: #fff;
    font-size: 18px;
    margin-left: 10px;
  }
}
.collapse {
  width: 100px;
  span {
    width: 100%;
    background: #304156;
  }
}
.toggle-button {
  background: #304156;
}
</style>